// The application menu class is basically one menu that is shown both if the
// custom menubar is shown and a top level item submenu is pulled up, as well as
// if there is a context menu (as we don't use the remote class to display
// context menus anymore).

div#application-menu {
  position: fixed;
  overflow-y: auto; // In case the menu is too small, enable scrolling

  div.menu-item {
    height: @menubar-height;
    line-height: @menubar-height;
    overflow: hidden;
    padding: 0 5px;
    display: grid;
    grid-template-columns: 50px auto 100px;
    grid-template-rows: 100%;
    grid-template-areas: "status label after";

    div.status {
      grid-area: status;
      text-align: center;
    }
    div.after-element {
      grid-area: after;
      text-align: right;
    }
    div.label {
      grid-area: label;
      text-align: left;
    }

    // Separators are obviously very small
    &.separator { height: 1px; }
  }
}
